<template>
	<view>
		<view class="active-info">
			<view class="title">个人照片</view>
			<view class="title-info">请上传比例为1:1的图片，最多8张</view>
			<u-upload
				width="124rpx"
				height="124rpx"
				:fileList="fileList"
				@afterRead="afterRead"
				@delete="deletePic"
				multiple
				:maxCount="8"
			></u-upload>
		</view>
		<view class="active-info">
			<view class="t-cell required">
				<view class="t-cell-content">昵称</view>
				<u-input class="input-flex" :maxlength="10" inputAlign="right" placeholder="请输入昵称" border="none" :value="userInfo.nickname" fontSize="28" color="#333" @input="handleNicknameInput"></u-input>
			</view>
			<view class="t-cell required" @click="handleSexOpen">
				<view class="t-cell-content">性别</view>
				<view class="t-cell-text">{{userInfo.gender === 1 ? '男' : '女'}}</view>
				<u-icon name="arrow-right" size="24" color="#333"></u-icon>
			</view>
			<view class="t-cell" @click="handleDateOpen">
				<view class="t-cell-content">生日</view>
				<view class="t-cell-text">{{userInfo.birthday}}</view>
				<u-icon name="arrow-right" size="24" color="#333"></u-icon>
			</view>
		</view>
		<view class="active-info">
			<view class="t-cell required">
				<view class="t-cell-content">联系手机号</view>
        <u-input class="input-flex" inputAlign="right" placeholder="输入能联系到你的手机号" border="none" :value="userInfo.contactPhone" fontSize="28" color="#333" @input="handleContactPhoneInput"></u-input>
			</view>
			<view class="t-cell">
				<view class="t-cell-content">授权手机号</view>
				<view class="t-cell-text">{{userInfo.phone}}</view>
			</view>
		</view>
    <view class="active-info">
      <view class="t-cell">
        <view class="t-cell-content">个性签名</view>
        <u-input class="input-flex" inputAlign="right" placeholder="请输入个性签名" border="none" :value="userInfo.signature" fontSize="28" color="#333" @input="handleSignatureInput"></u-input>
      </view>
    </view>
    <!-- <view class="active-info" v-if="!this.userInfo.subscribeMp">
    <official-account></official-account>
    </view> -->
		<view style="padding: 0 24rpx;">
			<u-button class="footer-btn" customStyle="height: 88rpx;border-radius: 44rpx;margin-top: 64rpx;margin-bottom: 24rpx;" color="#1c1c1e" text="保存信息" @click="fetchUpdateUserInfo"></u-button>
		</view>
		<u-modal :show="showModal" title="提示" content='退出将不会保存当前填写的信息，确定退出吗？' confirmText="删除" cancelText="取消" :showCancelButton="true" confirmColor="#F73D00" @confirm="sureConfirm" @cancel="handleCancel"></u-modal>
		<u-modal :show="showSex" :showConfirmButton="false">
			<view class="slot-content" style="position: relative;">
				<view class="modal-close" @click="handleSexClose">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<image class="modal-img" src="https://static.wddzq.com/static/shezhigerenxinxichatu.png"></image>
				<view class="modal-title">选择性别</view>
				<view class="modal-content">
					设置正确的性别，有助于交到更多的朋友和享受专属优惠哦～
				</view>
				<view class="modal-sex">
					<view class="modal-sex-item mr-108" :data-value="2" @click="handleSexSelect">
						<image src="https://static.wddzq.com/static/xingbie_nv.png"></image>
						<text :class="gender === 2 ? 'active' : ''">我是美女</text>
					</view>
					<view class="modal-sex-item" :data-value="1" @click="handleSexSelect">
						<image src="https://static.wddzq.com/static/xingbie_nan.png"></image>
						<text :class="gender === 1 ? 'active' : ''">我是帅哥</text>
					</view>
				</view>
				<view style="padding: 0 24rpx;">
					<u-button customStyle="height: 88rpx;border-radius: 44rpx;margin-top: 64rpx;" color="#1c1c1e" text="确定" @click="handleSexSubmit"></u-button>
				</view>
			</view>
		</u-modal>
		<!-- <u-datetime-picker
			:show="showDate"
			mode="date"
		></u-datetime-picker> -->
		<tui-datetime :type="2" ref="dateTime" @confirm="handleDateConfirm"></tui-datetime>
	</view>
</template>

<script>
	import { getUserInfo, updateUserInfo } from '../../config/api.js';
	import { to, uploadAfter } from '../../config/utils.js';
	export default {
		data() {
			return {
				fileList: [],
				gender: '',
				userInfo: {},
				showModal: false,
				showSex: false,
				showDate: false,
				currentDelIndex: ''
			}
		},
		onReady() {
			this.fetchUserInfo();
		},
		methods: {
			async afterRead(file) {
				const fileData = await uploadAfter(file.file);
				let fileList = fileData?.filter(item => item.url);
				this.fileList = this.fileList.concat(fileList);
			},
			deletePic(event) {
				this.showModal = true;
				const { index } = event || {};
				this.currentDelIndex = index;
			},
			sureConfirm() {
				let fileList = [...this.fileList]
				fileList.splice(this.currentDelIndex, 1);
				console.log(fileList);
				this.fileList = fileList;
				this.showModal = false;
			},
			handleCancel() {
				this.showModal = false;
				this.currentDelIndex = '';
			},
      handleContactPhoneInput(value) {
        this.userInfo = {
          ...this.userInfo,
          contactPhone: value
        };
      },
			handleNicknameInput(value) {
				this.userInfo = {
					...this.userInfo,
					nickname: value
				};
			},
      handleSignatureInput(value) {
        this.userInfo = {
          ...this.userInfo,
          signature: value
        };
      },
			// 性别选择
			handleSexSelect(e) {
				const { value } = e.currentTarget.dataset || {};
				this.gender = value;
			},
			handleSexSubmit() {
				this.userInfo = {
					...this.userInfo,
					gender: this.gender
				};
				this.handleSexClose();
			},
			handleSexOpen() {
				if(this.userInfo.gender) {
					return uni.showToast({
						title: '禁止修改性别',
						icon: 'none'
					})
				}
				this.showSex = true;
			},
			handleSexClose() {
				this.showSex = false;
			},
			handleDateOpen() {
				// this.showDate = true;
				this.$refs.dateTime.show();
			},
			handleDateConfirm(e) {
				this.userInfo = {
					...this.userInfo,
					birthday: e.result
				};
			},
			// 获取用户信息
			async fetchUserInfo() {
				const [err, user] = await to(getUserInfo());
				if(err) return;
				if(user.success) {
					this.userInfo = user.data || {};
					this.fileList = user.data?.picList?.split(',').map(item => ({ url: item })) || [];
					this.gender = user.data?.gender;
					console.log(user)
				}
			},
			// 保存用户信息
			async fetchToLocalUserInfo() {
				const [err, user] = await to(getUserInfo());
				if(err) return;
				if(user.success && user.data) {
					uni.setStorage({
						key: 'userInfo',
						data: JSON.stringify(user.data)
					})
				}
			},
			// 更新用户信息
			async fetchUpdateUserInfo() {
				const { birthday, gender, headPic, nickname, contactPhone,signature } = this.userInfo || {};

				const [err, data] = await to(updateUserInfo({
					birthday, gender, headPic, nickname, contactPhone,signature,
					picList: this.fileList.map(item => item.url).join(',')
				}))
				if(err) {
					return uni.showToast({
						title: err.msg || '更新失败',
						icon: 'error'
					})
				}
				if(data.success) {
					this.fetchToLocalUserInfo();
					uni.showToast({
						title: '更新成功'
					})
				} else {
					uni.showToast({
						title: data.msg || '更新失败',
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style>
.title {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}
.title-info {
	font-size: 24rpx;
	color: #FF6830;
	margin-top: 16rpx;
	margin-bottom: 24rpx;
}
.active-info {
	margin: 18rpx 24rpx;
	padding: 30rpx 18rpx;
	border-radius: 18rpx;
	background-color: #fff;
}

/* 单元格 */
.t-cell {
	display: flex;
	height: 100rpx;
	align-items: center;
	border-bottom: 1rpx solid #DDDDDD;
	position: relative;
}
.t-cell.required::after {
	position: absolute;
	content: '*';
	font-size: 24rpx;
	color: red;
	top: 30rpx;
}
.t-cell:last-child {
	border: none;
}
.t-cell image {
	width: 28rpx;
	height: 28rpx;
	border: 8rpx solid #d9d9d9;
	border-radius: 36rpx;
}
.t-cell .t-cell-content {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-left: 12rpx;
}
.t-cell-text {
	font-size: 28rpx;
	color: #333;
}
/* 弹窗 */
.modal-close {
	position: absolute;
	top: -60rpx;
	right: -60rpx;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-img {
	position: absolute;
	top: -250rpx;
	left: 0;
	width: 200rpx;
	height: 250rpx;
}
.modal-title {
	font-size: 28rpx;
	text-align: center;
	font-weight: bold;
	color: #000;
}
.modal-content{
	font-size: 28rpx;
	text-align: center;
	color: #666;
	margin-top: 48rpx;
	margin-bottom: 32rpx;
}
.modal-sex {
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-sex-item {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.modal-sex-item image {
	width: 116rpx;
	height: 114rpx;
	margin-bottom: 12rpx;
}
.modal-sex-item text {
	font-size: 24rpx;
	color: #333;
}
.modal-sex-item text.active {
	color: #FFB803;
}
.mr-108 {
	margin-right: 108rpx;
}

.input-flex {
	flex: 1;
}
</style>
